<template>
  <div class="map-tool">
    <div
      class="bottom-tool"
      :class="{
        'bottom-tool-1': !rightPanel || !rightPanelShow,
        'bottom-tool-2': !bottomPanel || !bottomPanelShow
      }"
    >
      <BaseLayer />
    </div>
    <div class="left-tool" v-if="rightPanel != 'floor'">
      <Legend />
    </div>
    <Restoration />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import BaseLayer from "./CBaseLayer.vue";
import Legend from "./CLegend.vue";
import Restoration from "./CRestoration.vue";
import {
  getDataStore,
  getZlxmData,
  getGridmanList,
  getCyztdwxx,
  getJjjgdwxx
} from "@/assets/modules/service";
@Component({
  name: "MapTool",
  components: {
    BaseLayer,
    Legend,
    Restoration
  }
})
export default class extends Vue {
  get rightPanel() {
    return this.$store.getters["panel/rightPanel"];
  }

  get rightPanelShow() {
    return this.$store.getters["panel/rightPanelShow"];
  }

  get bottomPanel() {
    return this.$store.getters["panel/bottomPanel"];
  }

  get bottomPanelShow() {
    return this.$store.getters["panel/bottomPanelShow"];
  }
  gridmanData: any[] = [];
  zlxmData: any[] = [];
  zlqyData: any[] = [];
  jjjgData: any[] = [];
  mounted() {
    this.getGridmanList();
    this.getZlxmData();
    this.getZlqyData();
    this.getJjjgData();
  }
  async getGridmanList() {
    const data: any = {
      queryType: 0,
      areaType: 0,
      page: 1,
      pageSize: 1000
    };
    await getGridmanList(data).then((res: any) => {
      if (res?.data && res.data.datal && res.data.datal.length > 0) {
        this.gridmanData = res.data.datal.filter((item: any) => {
          return (
            item?.point?.x != null &&
            item?.point?.y != null &&
            item?.point?.x != "" &&
            item?.point?.y != ""
          );
          // return item?.point?.x ?? item?.point?.y ?? (item?.point?.x != '' && item?.point?.y != '')
        });
        // this.gridmanData = res.data.datal
      } else {
        this.gridmanData = [];
      }
      this.$store.commit("panelData/setGridmanData", this.gridmanData);
    });
  }
  async getZlxmData() {
    await getZlxmData().then((res: any) => {
      if (res?.data && res.data.length > 0) {
        this.zlxmData = res.data.filter((item: any) => {
          return (
            item?.xzb != null &&
            item?.yzb != null &&
            item?.xzb != "" &&
            item?.yzb != ""
          );
          // return item?.xzb ?? item?.yzb ?? (item?.xzb != '' && item?.yzb != '')
        });
        // this.zlxmData = res.data;
      } else {
        this.zlxmData = [];
      }
      this.$store.commit("panelData/setZlxmData", this.zlxmData);
    });
  }
  async getZlqyData() {
    // const data: any = {
    //   dataStoreId: '1687918297320',
    //   page: {
    //     usePagination: false
    //   }
    // }
    await getCyztdwxx().then((res: any) => {
      if (res?.data && res.data.length > 0) {
        // this.zlqyData = res.data.records
        this.zlqyData = res.data.filter((item: any) => {
          return (
            item?.xzb != null &&
            item?.yzb != null &&
            item?.xzb != "" &&
            item?.yzb != ""
          );
          // return item?.xzb ?? item?.yzb ?? (item?.xzb != '' && item?.yzb != '')
        });
      } else {
        this.zlqyData = [];
      }
      this.$store.commit("panelData/setZlqyData", this.zlqyData);
    });
  }
  async getJjjgData() {
    // const data: any = {
    //   dataStoreId: '1689126716319',
    //   page: {
    //     usePagination: false
    //   }
    // }
    await getJjjgdwxx().then((res: any) => {
      if (res?.data && res.data.length > 0) {
        this.jjjgData = res.data.filter((item: any) => {
          return (
            item?.zbx != null &&
            item?.zby != null &&
            item?.zbx != "" &&
            item?.zby != ""
          );
          // return item?.zbx ?? item?.zby ?? (item?.zbx != '' && item?.zby != '')
        });
        // this.jjjgData = res.data.records
      } else {
        this.jjjgData = [];
      }
      this.$store.commit("panelData/setJjjgData", this.jjjgData);
    });
  }
}
</script>

<style lang="scss" scoped>
.map-tool {
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  color: white;
  .bottom-tool {
    position: fixed;
    bottom: 321px;
    right: 483px;
    pointer-events: auto;
    display: flex;
    ::v-deep .tool-item {
      height: 28px;
      line-height: 28px;
      font-family: AlibabaPuHuiTi_2_45_Light;
      font-size: 14px;
      background-color: #001022;
      border-radius: 4px;
      cursor: pointer;
      padding: 0px 15px;
      &:not(:last-of-type) {
        margin-right: 20px;
      }
    }
    &.bottom-tool-1 {
      right: 16px;
    }
    &.bottom-tool-2 {
      bottom: 16px;
    }
  }
  .left-tool {
    position: fixed;
    top: 109px;
    left: 483px;
    pointer-events: auto;
    width: 60px;
    ::v-deep .tool-item {
      font-family: AlibabaPuHuiTi_2_65_Medium;
      font-size: 12px;
      color: #ffffff;
      width: 60px;
      height: 80px;
      background-color: #003773;
      border-radius: 0;
      margin-bottom: 2px;
      text-align: center;
      cursor: pointer;
      &:first-of-type {
        border-radius: 4px 4px 0px 0px;
      }
      &:last-of-type {
        border-radius: 0px 0px 4px 4px;
      }
    }
  }
}
</style>
